<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="central/include :: header('物料录入')" />
    <th:block th:include="include::editable-select-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-centralMaterial-add">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">物料唯一编码：</label>
                <div class="col-sm-8">
                    <div class="row" style="padding: 0px 15px;">
                        <input name="id" class="form-control col-sm-9" style="width: 75%;display: inline-block;" type="text" required>
                        <span class="col-sm-3">
                        <button type="button" onclick="generateSerialNumber($('[name=id]'))" class="btn btn-success">生成流水号</button>
                    </span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">物料批次号：</label>
                <div class="col-sm-8">
                    <div class="row" style="padding: 0px 15px;">
                        <select name="batchNo" class="form-control m-b col-sm-9"  style="width: 75%;display: inline-block;" required>
                        </select>
                        <span class="col-sm-3">
                            <button type="button" onclick="generateSerialNumber($('[name=batchNo]'))" class="btn btn-success">生成流水号</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">物料类型：</label>
                <div class="col-sm-8">
                    <select name="typeId" onchange="typeIdChange(this)" class="form-control m-b" required>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">初始操作站点：</label>
                <div class="col-sm-8">
                    <select name="operationStationId" class="form-control m-b" required>
                        <option value="">请先选择物料类型</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">合成物料：</label>
                <div class="col-sm-8">
                    <select name="parentTypeId" class="form-control m-b" required>
                        <option value="">请先选择物料类型</option>
                    </select>
                </div>
            </div>
            <!--       物料所属的根产品类     -->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">物料所属：</label>
                <div class="col-sm-8">
                    <select name="productTypeId" class="form-control m-b" required>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">工艺编号：</label>
                <div class="col-sm-8">
                    <select name="artProcessId" class="form-control m-b" required>
                        <option value="">请先选择物料类型</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">描述：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control"></textarea>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="central/include :: footer" />
    <th:block th:include="include :: editable-select-js" />
    <th:block th:include="include :: import-js('serialNumber')"/>
    <th:block th:include="central/include :: import-js('centralArtProcess')"/>
    <th:block th:include="central/include :: import-js('centralProductTypeOperationStation')"/>
    <script th:inline="javascript">

        var prefix = ctx + "central/centralMaterial"

        const batchNoSet = new Set();
        const materialTypeListOfPartMap = new Map();
        $("#form-centralMaterial-add").validate({
            focusCleanup: true
        });

        function generateSerialNumber($input){
            $.serialNumberBusiness.openGenerateSerialNumber(serialNumber=>{
                $input.val(serialNumber)
            })
        }

        /**/
        $(function(){
            loadMaterialBatchNoData();

            loadMaterialListOfPart();

            loadMaterialListOfFinishedProduct();
        })

        /*加载产品物料列表*/
        function loadMaterialListOfFinishedProduct(){
            $.productTypeBusiness.getSimpleListOfFinishedProduct("[name=productTypeId]")
        }

        /*加载零件物料列表*/
        function loadMaterialListOfPart(){
            $.productTypeBusiness.getSimpleListOfPart("[name=typeId]",null,res=>{
                const result = res.data
                console.log("result",result)
                
                materialTypeListOfPartMap.clear()
                
                if(result && result instanceof Array){
                    result.forEach((item)=>materialTypeListOfPartMap.set(item.id,item))
                }
                
            })

        }

        /*加载物料批次号列表*/
        function loadMaterialBatchNoData(){
            const $batchNo = $("[name=batchNo]")
            $.materialBusiness.getDistinctMaterialBatchNoList({$select:$batchNo},null,(res)=>{
                //使用可编辑的下拉框插件
                $batchNo.on('select.editable-select', function (e) {
                    const $this = $(e.currentTarget)
                    const selectedBatchNo = $this.val()
                    if(!batchNoSet.has(selectedBatchNo)){
                        batchNoSet.clear()
                        batchNoSet.add(selectedBatchNo)
                        onSelect(selectedBatchNo)
                    }
                }).editableSelect()
            })
        }
        function typeIdChange(_this){
            console.log("_this",_this)
            const typeId = $(_this).val();
            const $artProcessId = $('[name=artProcessId]');
            const $operationStationId = $('[name=operationStationId]');
            if(typeId){
                $.artProcessBusiness.getSimpleListByProductTypeId({$select:$artProcessId,fillDefault:false},typeId)
                $.productTypeOperationStationBusiness.getListByProductTypeId({$select:$operationStationId,fillDefault:false},typeId)
                getParentMaterialTypeList(typeId)
            }else{
                $artProcessId.empty()
                $artProcessId.append('<option value="">请先选择物料类型</option>')

                $operationStationId.empty()
                $operationStationId.append('<option value="">请先选择物料类型</option>')

                const $parentTypeId = $("[name=parentTypeId]")
                $parentTypeId.empty()
                $parentTypeId.append('<option value="">请先选择物料类型</option>')
            }
        }
        //获取父级物料类型
        function getParentMaterialTypeList(materialTypeId){
            $.productTypeBusiness.getParentMaterialTypeList({$select:$("[name=parentTypeId]"),fillDefault:false,name:'name',value:'id'},materialTypeId)
        }

        //当物料批次号列表发生改变业务处理方法
        function onSelect(batchNo){

            const $productTypeId = $("[name=productTypeId]")

            if($.common.isEmpty(batchNo)){
                $productTypeId.attr("readonly",false)
                return
            }
            // if($productTypeId[0].length == 1){
            //     return
            // }

            $.centralProductBusiness.findRoot(batchNo)
                .then(res=>{
                    if(res.data){
                        const data = res.data
                        const productTypeId = data.typeId
                        const productTypes = data.productTypes

                        $.selectComponent.selected({$select:$productTypeId,selectValue:productTypeId})

                        if(productTypes && Array.isArray(productTypes)){
                            $.selectComponent.init({$select:$("[name=typeId]"),data:productTypes,name:'name',value:'id',cache:false})
                        }


                        $productTypeId.attr("readonly",true)
                    }else{
                        $productTypeId.attr("readonly",false)
                    }
                })
        }

        function submitHandler() {
            if ($.validate.form()) {
                $.operation.insert(prefix, $.common.formToJSON());
            }
        }


    </script>
</body>
</html>